<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    #parse("/h5/common/webWords.html")
    <link rel=stylesheet type=text/css href="http://${staticHost}/css/component.css">

    <link rel="stylesheet" type="text/css" href="http://${staticHost}/css/common.css" />
    <link rel="stylesheet" href="http://${staticHost}/css/larea.css">

    <script type="text/javascript" src="http://${staticHost}/js/jquery.js"></script>

    <script type="text/javascript" src="http://${staticHost}/js/layer.js"></script>
    <script type="text/javascript" src="http://${staticHost}/js/function.js"></script>
    <!--头部 begin -->
    #parse("/h5/common/headerTop.html")
    <!--头部 end -->


    <script type="text/javascript">
        var fristNum = 1;
        $(document).ready(function () {
        	$(".moreRecruitment").click(function () {
                var _this = $(this);
                var sign = _this.attr('sign');
                var num = _this.attr('num');
                var keyword = $("#keyword").val();
                var calling = $("#calling").val();
				var cityvalue = $("#cityvalue").val();
				var job = $("#job").val();
				var jobPay = $("#jobPay").val()
                if(fristNum==1){
                    num = num*1 + 1;
                }else{
                    num = 1;
                }
                $.ajax({
                    type:'post',
                    url:'${requestHost}/public/moreRecruitment',
                    contentType:'application/x-www-form-urlencoded; charset=utf-8',
                    data:{
                        sign:sign,
                        num:num,
                        keyword:keyword,
                        parentId:2,
                        calling:calling,
                        cityvalue:cityvalue,
                        job:job,
                        jobPay:jobPay
                    },
                    success: function (result) {
                        if(fristNum==0){
                            $("#recruitmentId").empty();
                        }
                        var newsList = result.result;
                        var newsJson = eval("("+newsList+")");
                        $.each(newsJson, function (i, val) {
                        	var id = val.id;
                            var position = val.position;
                            var jobPayName = val.jobPayName;
                            var companyAddress = val.workPlaceName;
                            var workingLifeName = val.workingLifeName;
                            var recruitmentNatureName = val.recruitmentNatureName;
                            var educationalRequirementsName = val.educationalRequirementsName;
                            var companyName = val.companyName;
                            var headPortrait = val.headPortrait;
                            if(position.position > 40){
                                position.substring(0, 40)+'...';
                            }
                            var styleStr="";
                            if(i == 0){
                                if(fristNum==0){
                                    styleStr+="border-top: 0px #f8f7fc solid;";
                                }else{
                                    styleStr+="border-top: 12px #f8f7fc solid;";
                                }
                            }
                            if (i == newsJson.length-1){
                                styleStr+="border-bottom: 1px #f8f7fc solid;";
                            }
                            $("#recruitmentId").append("<li class='jobli' style='"+styleStr+"'><a positionId='"+id+"' type='enterprise' class='checkStatus' onclick='toDetail(\""+id+"\")' href='javascript:void(0)'><p><span class='jobname fl'>"+position+"</span><span class='payment fr'>"+jobPayName+"</span></p><p class='fs14'><span class='fl c102'>"+companyAddress+"<i class='shuxian c172'>|</i>"+workingLifeName+"<i class='shuxian c172'>|</i>"+recruitmentNatureName+"<i class='shuxian c172'>|</i>"+educationalRequirementsName+"</span></p><p  class='fs14'><span><img src="+headPortrait+" style='width: 30px;z-index: 2;position: relative;'></span><span class='bgspan'>"+companyName+"</span></p></a></li>");
                            _this.attr('num', num);
                            
                        });
                        fristNum = 1;
                    }
                });
            });
/*
        	$("#calling").change(function() {
                $("#searchbutton").trigger("click");
            });
        	$("#cityvalue").change(function() {
                $("#searchbutton").trigger("click");
            });
        	$("#job").change(function() {
                $("#searchbutton").trigger("click");
            });
 */
            $("#jobPay").change(function() {
                $("#searchbutton").trigger("click");
            });
			$("#searchbutton").click(function(){
                fristNum = 0;
                $(".moreRecruitment").trigger("click");
			});
        });

        function toDetail(positionId) {
            $.ajax({
                type: 'post',
                url: '${requestHost}/personnelWork/public/toWorkDetails',
                contentType: 'application/x-www-form-urlencoded; charset=utf-8',
                data: {
                    positionId: positionId
                },
                success: function (result) {
                    if (result.status == "0") {
                        layer.open({
                            content: '该职位已关闭',
                            btn: '好的'
                        });
                    } else {
                        window.location.href = '/personnelWork/auth/workDetails?positionId=' + positionId + '&type=enterprise';
                    }

                }
            });
        }
    </script>

    <style type="text/css">
        .scroll_box_more a:hover {
            background-color: #eeeeee;
            color:#666666;
        }
        .zs_news2 li{
            background:url('');
        }
        .kecheng li dl dt{
            background:url('');
        }
        .context_div {
            width: 100%;
            height: 75px;
        }

        .context_div span {
            color: #666666;
            font-size: 16px;
            width: 100%;
            text-align:center;
        }

        .kecheng li {
            border-bottom:none;
        }

        .center-vertical{
            display:block;
            position: relative;
            top: 30px;
            transform:translateY(-50%);
        }

        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 12px;
            width:70%;
        }

        .button2 {background-color: #008CBA;} /* Blue */
        .button3 {background-color: #f44336;} /* Red */
        .button4 {
            background-color: #3900ff;
            color: white;
            padding: 15px 25px;
        } /* Gray */
        .button5 {background-color: #ff9f00;} /* Black */
        .mbox{border-bottom: none;}
        .main{margin:0;border-bottom: none;}


        #keyword {
            background: url(http://116.255.210.85:9911/images/searchinput.png) no-repeat;
            background-size: 15px;
            background-position: 5px;
            padding-left: 25px;
        }
        /**搜索***/
        .filter-outer {
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            height: 40px;
        }
        .filter-outer .filter-list {
            width: 25%;
        }
        .filter-outer .filter-list {
            position: relative;
            float: left;
            text-align: center;
            height: 40px;
        }
        .filter-outer .filter-list .filter-cell {
            display: inline-block;
            position: relative;
            margin-left: -.42rem;
        }
        .filter-outer .filter-list .filter-cell:before {
            content: ' ';
            position: absolute;
            top: 13px;
            right: -10px;
            display: inline-block;
            text-decoration: none;
            -webkit-font-smoothing: antialiased;
            width: 13px;
            height: 13px;
            background-image: url(http://${staticHost}/images/drop-down.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .filter-outer .filter-list .filter-cell .filter-cell-txt {
            max-width: 65px;
            font-size:14px;
            width:64px;
        }
        .filter-outer .filter-list .filter-cell .filter-cell-txt {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height:40px;
            line-height:40px;
        }
        .filter-outer .filter-list:after {
            position: absolute;
            right: 0;
            top: .148rem;
            width: 1px;
            height: 36px;
            content: '';
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            background-color: #ededed;
        }
        #cityhtml {
            text-align: left;
            margin-top: -4px;
            width: 65px;
            text-align: center;
            color: #666;
        }
        .salaryrange {
            height: 40px;
            line-height: 40px;
            color: #666;
            margin-top: -1px;
            background: white;
            text-align: center;
            padding-left: 10px;
        }

        .newjob {
            border-bottom: 1px solid #ddd;
            padding-bottom: 20px;
        }
        .newjob span {
            font-size: 18px;
            color: #666;
            padding-left: 10px;
        }

        .jobli {
            border-bottom: 12px #f8f7fc solid;
            padding: 8px 2% 16px 2%;
            width: 96%;
            float: left;
        }
        .jobli p {
            white-space: nowrap;overflow: hidden;
            height: 30px;
            line-height: 30px;
            color: #4e4e4e;
        }
        .jobli img {
            border-radius: 50%;
        }
        .jobname {
            color: black;
            font-size: 16px;
        }
        .payment {
            font-size: 16px;
            color: rgb(253,88,94);
        }
        .jobli p span{
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
        }
        .fs14 {
            font-size: 14px;
        }
        .c102 {
            color: rgb(102,102,102);
        }
        .c172 {
            color: rgb(172,172,172);
        }
        .shuxian {
            padding-left: 4px;
            padding-right: 4px;
        }
        .bgspan {
            background: rgb(244,245,247);
            padding: 0px 6px 0px 10px;
            color: rgb(153,153,153);
            border-radius: 10px 3px 3px 10px;
            margin-right: 8px;
            margin-left: -8px;
            z-index: 1;
        }

        .loadmorep {
            background: white;
            text-align: center;
            padding: 10px;
            font-size: 14px;
        }
        .goback {
            height: 20px;
            width: 20px;
            position: fixed;
            left: 10px;
            top: 15px;
            background: url(http://116.255.210.85:9911/images/goback.png) no-repeat;
            background-size: contain;
        }
    </style>
    #parse("/h5/common/selectArea.html")
</head>
<body>
<!--头部 begin -->
#parse("/h5/common/userHeader.html")
<!--头部 end -->

<div style="background: white;">
    <div class="filter-outer">
        <div class="filter-list js-filter qs-temp-new-city" data-tag="0" data-type="city">
            <div class="filter-cell">
                <div class="filter-cell-txt qs-temp-txt-city callinghtml" id="btnWishTrade">
                    #if(!$expectedJobIndustryName)
                    行业
                    #else
                    $expectedJobIndustryName
                    #end
                </div>
                <input name="calling" type="hidden" id="calling" value="$!{calling}"></a>
            </div>
        </div>
        <div class="filter-list js-filter" data-tag="1">
            <div class="filter-cell">
                <div class="filter-cell-txt f-normal-txt-exp" >
                    <input id="cityhtml" type="text" readonly="" placeholder="地区"  value="#if (!$jobAreasName || "$jobAreasName" == "") 地区 #else $jobAreasName  #end"/>
                </div>
                <input id="cityvalue" type="hidden" value="$!{cityvalue}"/>
            </div>
        </div>
        <div class="filter-list js-filter" data-tag="2">
            <div class="filter-cell"><div class="filter-cell-txt f-normal-txt-edu jobhtml" id="post">
                #if(!$jobCareersName)
                职位
                #else
                $jobCareersName
                #end
            </div></div>
            <input name="job" type="hidden" id="job" value="$!{job}">
        </div>
        <div class="filter-list js-filter" data-tag="3">
            <div class="filter-cell"><div class="filter-cell-txt j-change-color">
                <select class="salaryrange fl"  name="jobPay" id="jobPay" >
                    <option value="">工资</option>
                    #foreach($data in $jobPayList)
                    <option value="$data.value"  #if ("$data.value" == "$jobPay") selected  #end >$data.label</option>
                    #end
                </select>
            </div></div>
        </div>
    </div>
    <div align="center" style="padding: 1rem 0rem;"><input placeholder="请输入搜索的职位" type="text" id="keyword" value="$!{keyword}" style="border: 1px solid #ddd; height: 36.5px;line-height:30px; width: 60%;" /><input type="button"  class="searchbutton" id="searchbutton" style="height: 39px; width: 60px;background: rgb(73, 185, 234);color: white;font-size:14px;"  value="找工作"/></div>

    <ul class="userjobul" id="recruitmentId" style="border-top: 1px #f8f7fc solid;">
        
	        #foreach($recruitment in $recruitmentList)
		        <li class="jobli"  #if($velocityCount == 0) style="border-top: 0px #f8f7fc solid;" #end #if($velocityCount == $recruitmentList.size()) style="border-bottom: 1px #f8f7fc solid;" #end>
				    <a positionId='$recruitment.id' type='enterprise' class='checkStatus' onclick="toDetail('$recruitment.id')" href="javascript:void(0)">
				    	<p>
		                    <span class="jobname fl">#if($recruitment.position.length()>40)$recruitment.position.substring(0,40)...#else$recruitment.position#end</span>
		                    <span class="payment fr">$recruitment.jobPayName</span>
	                	</p>
					    <p class="fs14">
		                    <span class="fl c102">$recruitment.workPlaceName<i class="shuxian c172">|</i>$recruitment.workingLifeName<i class="shuxian c172">|</i>$recruitment.recruitmentNatureName<i class="shuxian c172">|</i>$recruitment.educationalRequirementsName</span>
		                </p>
					    <p  class="fs14">
		                    <span><img src="$recruitment.headPortrait" style="width: 30px;z-index: 2;position: relative;"></span>
		                    <span class="bgspan" >$recruitment.companyName</span>
		                </p>
				    </a>
				</li>
	        #end
    </ul>
</div>
<div class="scroll_box_more">
    <p class="loadmorep">
        <a class="moreRecruitment" num="1" href="javascript:void(0)">点击加载更多<i><img src="http://${staticHost}/images/moredown.png" style="height:12px;width:auto;padding-left:6px;display: inline-block;"></i></a>
    </p>
</div>

<div class="holderdiv"></div>
<input id="classIdIpt" type="hidden" value="${}">
<div class="dialogMask" style="display: none; z-index: 118; opacity: 0.5;"></div>
<div class="choice choiceIndustry" style="position: absolute; left: 0px; bottom: 0px; display: none; z-index: 119;">
    <div class="choiceCon">
        <div class="choiceContent">
            <div class="choiceTxt">
                <p id="_limit"></p>
                <div class="choiceTopBtn">
                    <a href="javascript:void(0)" class="popBtn1 _btnAreaClear" id="_btnAreaClear" data="">清空</a>
                    <a href="javascript:void(0)" class="popBtn2 _btnAreaOk" id="_btnAreaOk"><b class="L"></b><b class="R"></b>确定</a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="choiceLst">
            </div>
            <p class="tit">已选行业：</p>
            <div class="choiceSelected">
                <ul id="_selected">
                </ul>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
<!--<script src="http://${staticHost}/js/LArea.js"></script>-->
<script src="http://${staticHost}/js/layer.js"></script>
<script>
    //关闭
    $(document).on("click", "._btnAreaOk", function(){
        $("._btnAreaClear").attr("data",0);
        $(".choiceLst,#_selected").html("");
        $(".dialogMask,.choice").hide();
//新增
        console.log($(".oldcalling").val());
        if($("#calling").val() != $(".oldcalling").val() || $("#job").val() != $(".oldjob").val()){
            $("#searchbutton").trigger("click");
        }
    })
    //清空
    $(document).on("click", "._btnAreaClear", function(){
        var id = $(this).attr("data");
        if(id==1){
            $("#calling").val("");
            $(".callinghtml").html("请选择");
        }else if(id==2){
            $("#job").val("");
            $(".jobhtml").html("请选择");
        }
        $("#_selected").html("");
        $("input[type='checkbox']").prop("checked", false);
    })
    //城市选择特效
    //window.setTimeout(showcity,5000);
    //function showcity(){
    var area = new LArea();
    area.init({
        'trigger': '#cityhtml',
        'valueTo': '#cityvalue',
        'keys': {
            id: 'id',
            name: 'name'
        },
        'type': 2,
        'data': [provs_data, citys_data, dists_data]
    });
</script>
#parse("/h5/common/selectCalling.html")
#parse("/h5/common/selectJob.html")
<!--底部 begin -->
#parse("/h5/common/footer.html")
<!-- 底部 end -->
</body>
</html>
